<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Spotify Web API Tutorial</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" type="text/css" href="../assets/css/SpotifyFinder.css" />
  </head>

  <body>
    <div class="topnav">
      <a class="active" href="#home">Spotify Finder!!</a>
    </div>
    <div class="container">
      <form action="">
        <input type="hidden" id="hidden_token" />
        <div class="col-sm-6 form-group row mt-4 px-0">
          <label for="Genre" class="form-label col-sm-2">Genre:</label>
          <select
            name=""
            id="select_genre"
            class="form-control form-control-sm col-sm-10"
          >
            <option>Select...</option>
          </select>
        </div>
        <div class="col-sm-6 form-group row px-0">
          <label for="Genre" class="form-label col-sm-2">Playlists:</label>
          <select
            name=""
            id="select_playlist"
            class="form-control form-control-sm col-sm-10"
          >
            <option>Select...</option>
          </select>
        </div>
        <div class="col-sm-6 row form-group px-0">
          <button
            type="submit"
            id="btn_submit"
            class="btn btn-success col-sm-12"
          >
            Search
          </button>
        </div>
      </form>
      <div class="row">
        <div class="col-sm-6 px-0">
          <div class="list-group song-list"></div>
        </div>
        <div class="offset-md-1 col-sm-4" id="song-detail"></div>
      </div>
    </div>
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>
    <script src="../assets/js/SpotifyFinder.js" type="text/javascript"></script>
  </body>
</html>